<template>
  <view>
    <view class="uni-padding-wrap">
      <view class="uni-title"> 日期：{{ year }}年{{ month }}月{{ day }}日 </view>
    </view>
    <picker-view
      v-if="visible"
      :indicator-style="indicatorStyle"
      :value="value"
      @change="bindChange"
    >
      <picker-view-column>
        <view
          class="item"
          v-for="(item, index) in years"
          :key="index"
        >{{ item }}年</view>
      </picker-view-column>
      <picker-view-column>
        <view
          class="item"
          v-for="(item, index) in months"
          :key="index"
        >{{ item }}月</view>
      </picker-view-column>
      <picker-view-column>
        <view
          class="item"
          v-for="(item, index) in days"
          :key="index"
        >{{ item }}日</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script>
export default {
  data() {
    const date = new Date();
    const years = [];
    const year = date.getFullYear();
    const months = [];
    const month = date.getMonth() + 1;
    const days = [];
    const day = date.getDate();

    for (let i = 1990; i <= date.getFullYear(); i++) {
      years.push(i);
    }

    for (let i = 1; i <= 12; i++) {
      months.push(i);
    }

    for (let i = 1; i <= 31; i++) {
      days.push(i);
    }
    return {
      title: "picker-view",
      years,
      year,
      months,
      month,
      days,
      day,
      value: [9999, month - 1, day - 1],
      /**
       * 解决动态设置indicator-style不生效的问题
       */
      visible: true,
      // indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
      indicatorStyle: `height: 50px;`,
    };
  },
  methods: {
    bindChange(e) {
      const val = e.detail.value;
      this.year = this.years[val[0]];
      this.month = this.months[val[1]];
      this.day = this.days[val[2]];
    },
  },
};
</script>

<style>
picker-view {
  width: 100%;
  height: 600rpx;
  margin-top: 20rpx;
}

.item {
  line-height: 100rpx;
  text-align: center;
}
</style>
